<template>
  <div class="my-container">
      <!--登录内容-->
      <div v-if="$store.state.user" class="header login">
        <div class="base-info">
          <div class="left">
            <img class="my-avatar" src="~@/assets/avatar.png" alt="">
            <span class="text">黑马头条号</span>
          </div>
          <div class="right">
            <van-button class="editBtn" round type="mini">编辑资料</van-button>
          </div>
        </div>
        <div class="user-pro">
          <div class="item">
            <span class="count">10</span>
            <span class="text">头条</span>
          </div>
          <div class="item">
            <span class="count">10</span>
            <span class="text">关注</span>
          </div>
          <div class="item">
            <span class="count">10</span>
            <span class="text">粉丝</span>
          </div>
          <div class="item">
            <span class="count">10</span>
            <span class="text">获赞</span>
          </div>
        </div>
      </div>
      <!--未登录状态-->
      <div v-else class="header not-login">
        <div class="login-btn" @click="$router.push('/login')">
          <img class="mobile-img" src="~@/assets/mobile.png" />
          <span>登录 / 注册</span>
        </div>
      </div>
      <!--宫格导航-->
      <van-grid class="grid-bar" clickable :column-num="2">
        <van-grid-item>
          <i slot="icon" class="toutiao toutiao-shoucang"></i>
          <span slot="text" class="text">收藏</span>
        </van-grid-item>
        <van-grid-item>
          <i slot="icon" class="toutiao toutiao-lishi"></i>
          <span slot="text" class="text">历史</span>
        </van-grid-item>
      </van-grid>
      <!--功能菜单-->
      <van-cell-group class="cellMenu">
        <van-cell is-link>
          <span slot="title" class="title">消息通知</span>
        </van-cell>
        <van-cell is-link>
          <span slot="title" class="title">小智同学</span>
        </van-cell>
      </van-cell-group>

      <van-cell v-if="$store.state.user" @click="exitSystem" clickable class="exit">
          <span slot="title">退出登录</span>
      </van-cell>
     
  </div>
</template>

<script>
import { getUserInfo } from '@/api/user.js'
export default {
  // 定义属性
  data() {
    return {
      user:{}
    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  mounted () {
    this.loadUser()
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    exitSystem () {
      this.$dialog.confirm({
        title: '退出标题',
        message: '您确认要退出吗？'
      }).then(() => {
        this.$store.commit('setUser', null)
      }).catch(() => {
        // on cancel
      })
    },
    async loadUser () {
      try {
        const data = await getUserInfo()
        console.log(data)
      } catch (err) {
        this.$toast('获取数据失败')
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    
  }
}
</script>

<style lang='less'>
  .my-container{
    .header{
      height: 401px;
      background: url('~@/assets/banner.png');
      background-size: cover;
    }
    .not-login{
      display:flex;
      justify-content: center;
      align-items: center;
      .login-btn{
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #ffffff;
        font-size: 28px;
        .mobile-img{
          height: 132px;
          width: 132px;
          margin-bottom: 15px;
        }
      }
    }
    .login{
      padding: 116px 33px 32px;
      box-sizing: border-box;
      .base-info{
        height: 132px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 55px;
        .left{
          display: flex;
          align-items: center;
          .my-avatar{
            height: 132px;
            width: 132px;
            margin-right: 22px;
          }
          .text{
            font-size: 30px;
            color: #ffffff;
          }
        }
        .right{
          .editBtn{
            background-color: #ffffff;
            color: #666;
            font-size: 20px;
            border: none;
          }

        }
      }
      .user-pro{
        height: 66px;
        display: flex;
        .item{
          flex: 1;
          display: flex;
          flex-direction: column;
          color: #ffffff;
          .count{
            font-size: 36px;
          }
          .text{
            font-size: 23px;
          }
        }
      }
    }
    .grid-bar{
      .toutiao{
        font-size: 45px;
        margin-bottom: 16px;
      }
      .toutiao-shoucang{
        color: #eb5253;
      }
      .toutiao-lishi{
        color: #ff9d1d;
      }
      .text{
        font-size: 28px;
        color: #333;
      }
    }
    .cellMenu{
      margin-top: 9px;
      text-align: left;
      font-size: 30px;
      .title{
        color: #333;
      }
    }
    .exit{
      color:#d86262;
      margin-top: 9px;
      text-align: center;
      font-size: 30px;
    }
  }
</style>